<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Form Layouts</title>

    <link href="<%=path%>/resources/css/style.css" rel="stylesheet">
    <link href="<%=path%>/resources/css/style-responsive.css" rel="stylesheet">
    <link href="<%= basePath%>/resources/js/fileInputpl/css/fileinput.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="<%=path%>/resources/js/html5shiv.js"></script>
    <script src="<%=path%>/resources/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/page/common/leftmenu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <%@ include file="/page/common/top.jsp" %>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>

            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">管理平台</a>
                </li>
                <li class="active">新增师傅</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <section class="wrapper">
            <!-- page start-->
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <section class="panel">
                            <header class="panel-heading">
                                录入师傅信息
                            </header>
                            <div class="panel-body">
                                <div class=" form">
                                    <form class="cmxform form-horizontal adminex-form" id="commentForm" method="post" action="<%=path %>/admin/worker/addWorker.do"
                                          enctype="multipart/form-data" novalidate="novalidate">
                                        <input type="hidden" name="id" value="${worker.id}"/>
                                        <div class="form-group ">
                                            <label for="wName" class="control-label col-lg-2">姓名：</label>
                                            <div class="col-lg-3">
                                                <input class=" form-control" id="wName" name="wName" minlength="2" value="${worker.wName}" type="text" required="true">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="sex" class="control-label col-lg-2">性别：</label>
                                            <div class="col-lg-3">
                                                <select id="sex" name="sex" class="form-control selectpicker" data-live-search="true" required>
                                                    <option value="">--请选择--</option>
                                                    <%--<option value="男">男</option>
                                                    <option value="女">女</option>--%>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="phone" class="control-label col-lg-2">联系电话：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="phone" type="text" value="${worker.phone}" name="phone" required>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="ide" class="control-label col-lg-2">身份证号：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="ide" type="text" value="${worker.ide}" name="ide">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="address" class="control-label col-lg-2">地址：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="address" type="text" value="${worker.address}" name="address">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="aliPayAccount" class="control-label col-lg-2">支付宝账号：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="aliPayAccount" type="text" value="${worker.aliPayAccount}" name="aliPayAccount">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="bankAccount" class="control-label col-lg-2">银行卡号：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="bankAccount" value="${worker.bankAccount}" type="text" name="bankAccount">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="wxAccount" class="control-label col-lg-2">微信账号：</label>
                                            <div class="col-lg-3">
                                                <input class="form-control " id="wxAccount" value="${worker.wxAccount}" type="text" name="wxAccount">
                                            </div>
                                        </div>
                                        <%--<div class="form-group ">
                                            <label class="control-label col-lg-2">维修服务:</label>
                                            <div class="col-lg-3">
                                                <input type="text" id="wBusId" value="${wBusId}" readonly="readonly">
                                            </div>
                                        </div>--%>
                                        <div class="form-group ">
                                            <label class="control-label col-lg-2">维修服务:</label>
                                            <div class="col-lg-3">
                                                <%--<input type="hidden" id="wBusId" value="${wBusId}">--%>
                                                <select id="wx-select" multiple="multiple" name="wBusinessType" class="form-control selectpicker" data-live-search="true">

                                                </select>
                                            </div>
                                            <%--<div class="col-lg-3">
                                                <button id="server-add-btn">添加</button>
                                            </div>--%>
                                        </div>
                                        <div class="form-group ">
                                            <label class="control-label col-lg-2">翻新服务:</label>
                                            <div class="col-lg-3">
                                                <%--<input type="hidden" id="fBusId" value="${fBusId}">--%>
                                                <select id="fx-select" multiple="multiple" name="fBusinessType" class="form-control selectpicker" data-live-search="true"></select>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label class="control-label col-lg-2">服务区域:</label>
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <%--<input type="hidden" id="proId" value="${proId}">--%>
                                                    <select id="province-select" name="provinceId" class="form-control selectpicker" data-live-search="true">
                                                    </select>
                                                </div>
                                                <div class="col-md-2">
                                                    <%--<input type="hidden" id="cityId" value="${cityId}">--%>
                                                    <select id="city-select" name="cityId" class="form-control selectpicker" data-live-search="true">
                                                    </select>
                                                </div>
                                                <div class="col-md-2">
                                                    <%--<input type="hidden" id="areaId" value="${areaId}">--%>
                                                    <select id="area-select" multiple="multiple" name="areaList" class="form-control selectpicker" data-live-search="true">

                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label class="control-label col-lg-2">师傅照片</label>
                                            <div class="col-lg-6">
                                                <input type="file" value="<%=path%>${worker.logo}" class="form-control file-loading" id="file" name="file"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <button class="btn btn-primary" type="submit">保存</button>
                                                <div class="btn btn-default">
                                                    <a href="<%=basePath %>/admin/worker/worker_list_page.do">取消</a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </section>
                    </div>
                </div>
            </div>
            <!-- page end-->
        </section>


        <!--body wrapper end-->

        <!--footer section start-->
        <%@ include file="/page/common/footer.jsp" %>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="<%=path%>/resources/js/jquery-1.10.2.min.js"></script>
<script src="<%=path%>/resources/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="<%=path%>/resources/js/jquery-migrate-1.2.1.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap-table.js"></script>


<script src="<%=path%>/resources/js/modernizr.min.js"></script>
<script src="<%=path%>/resources/js/jquery.nicescroll.js"></script>
<script src="<%=path%>/resources/js/common.js"></script>

<script src="<%=path%>/resources/js/fileInputpl/js/fileinput.js"></script>

<!--common scripts for all pages-->
<script src="<%=path%>/resources/js/scripts.js"></script>
<script>
    var offset = -1;
    var $table = $('#table'), selections = [];
    $(function () {
        init_province();
        init_fx();
        init_wx();
        initImgInput();
        init_sex();
        //initData();
    });

    function init_sex() {
        var sex = '${worker.sex}';
        $('#sex').find('option').remove();
        $('#sex').append('<option value="" selected>--请选择--</option>');
        if ('man' == sex) {
            $('#sex').append('<option value="man" selected>男</option>');
            $('#sex').append('<option value="woman">女</option>')
        } else if('woman' == sex){
            $('#sex').append('<option value="man">男</option>');
            $('#sex').append('<option value="woman" selected>女</option>')
        } else {
            $('#sex').append('<option value="man">男</option>');
            $('#sex').append('<option value="woman">女</option>')
        }
    }

    //初始化省信息
    function init_province() {
        /*var proId = $("#proId").attr('value')*/
        var proId = '${worker.provinceId}';
        $.ajax({
            url: '<%=path %>/admin/addressInfo/init_address.do',
            async: false,
            success: function (data) {
                $('#province-select').append('<option value="">--请选择--</option>')
                $.each(data.data, function (idx, obj) {
                    var value = obj.id;
                    if (value == proId) {
                        $('#province-select').append('<option value=' + value + ' selected>' + obj.name + '</option>')
                    } else {
                        $('#province-select').append('<option value=' + value + '>' + obj.name + '</option>')
                    }
                });
                if ($('#province-select').val() != "") {
                    init_city();
                }
            }
        });
    }

    function init_fx() {
        var fxIds = '${busIds}';
        var ids = fxIds.split(",");
        $.ajax({
            url: '<%=path %>/admin/btype/get_bus_type.do?flag=fx',
            async: false,
            success: function (data) {
                $.each(data.data, function (idx, obj) {
                    var value = obj.bId;
                    $('#fx-select').append('<option value=' + value + '>' + obj.bName + '</option>')
                });
                if (fxIds != '') {
                    $("#fx-select").val(ids);
                }
            }
        });
    }

    function init_wx() {
        var fxIds = '${busIds}';
        var ids = fxIds.split(",");
        $.ajax({
            url: '<%=path %>/admin/btype/get_bus_type.do?flag=wx',
            async: false,
            success: function (data) {
                $.each(data.data, function (idx, obj) {
                    var value = obj.bId;
                    $('#wx-select').append('<option value=' + value + '>' + obj.bName + '</option>')
                });
                if (fxIds != '') {
                    $("#wx-select").val(ids);
                }
            }
        });
    }

    //初始化市信息
    function init_city() {
        var cityId = '${worker.cityId}';
        $.ajax({
            url: '<%=path %>/admin/addressInfo/init_address.do?pid=' + $('#province-select').val(),
            async: false,
            success: function (data) {
                //$('#city-select').append('<option value="">--请选择--</option>')
                $.each(data.data, function (idx, obj) {
                    var value = obj.id;
                    if (cityId == value) {
                        $('#city-select').append('<option value=' + value + ' selected>' + obj.name + '</option>')
                    } else {
                        $('#city-select').append('<option value=' + value + '>' + obj.name + '</option>')
                    }
                });
                if ($("#city-select").val() != "") {
                    show_areas();
                }
            }
        });
    }

    function show_areas() {
        var areaIds = '${areaIds}';
        $.ajax({
            url: '<%=path %>/admin/addressInfo/init_address.do?pid=' + $('#city-select').val(),
            async: false,
            success: function (data) {
                //$('#area-select').append('<option value="">--请选择--</option>')
                $.each(data.data, function (idx, obj) {
                    var value = obj.id;
                    $('#area-select').append('<option value=' + value + '>' + obj.name + '</option>')
                });
                if (areaIds != null && areaIds != '') {
                    $("#area-select").val(areaIds.split(','));
                }
            }
        });
    }

    //选择省
    $('#province-select').on("change", function () {
        if ($('#province-select').val() == "") {
            $('#province-select').find('option').remove();
            $('#city-select').find('option').remove();
            $('#area-select').find('option').remove();
            $('#province-select').append("<option value=''>--请选择--</option>");
            $('#city-select').append("<option value=''>--请选择--</option>");
            //$('#area-select').append("<option value=''>--请选择--</option>");
            init_province();
        } else {
            $.ajax({
                url: '<%=basePath %>/admin/addressInfo/init_address.do?pid=' + $('#province-select').val(),
                async: false,
                success: function (data) {
                    $('#city-select').find('option').remove();
                    $('#area-select').find('option').remove();
                    //$('#area-select').append("<option value=''>--请选择--</option>");
                    $('#city-select').append("<option value=''>--请选择--</option>");
                    $.each(data.data, function (idx, obj) {
                        var value = obj.id;
                        $('#city-select').append('<option value=' + value + '>' + obj.name + '</option>')
                    });
                }
            });
        }
    });

    //选择市
    $('#city-select').on("change", function () {
        if ($('#city-select').val() == "") {
            $('#city-select').find('option').remove();
            $('#area-select').find('option').remove();
            $('#city-select').append("<option value=''>--请选择--</option>");
            //$('#area-select').append("<option value=''>--请选择--</option>");
            init_city();
        } else {
            $.ajax({
                url: '<%=basePath %>/admin/addressInfo/init_address.do?pid=' + $('#city-select').val(),
                async: false,
                success: function (data) {
                    //$('#city-select').find('option').remove();
                    $('#area-select').find('option').remove();
                    //$('#area-select').append("<option value=''>--请选择--</option>");
                    //$('#city-select').append("<option value='-1'>全部</option>");
                    $.each(data.data, function (idx, obj) {
                        var value = obj.id;
                        $('#area-select').append('<option value=' + value + '>' + obj.name + '</option>')
                    });
                }
            });
        }
    });

   /* $('.btn-default').on("click", function() {

    });*/

    function logoFormatter(value){
        var context="<img width='100px' height='30px' src='" + value + "'>"
        return context;
    }

    function initImgInput() {
        $(".fileinput-remove").on("click", function () {
//            $("#img-form-group").attr("class", "form-group has-feedback has-error");
            $("#submit").attr("disabled", "true !important");
            console.log("test----------->");
        });
        var options = {
            language: 'zh',
            showUpload: false, //是否显示上传按钮
            allowedPreviewTypes: ['image'],
            allowedFileExtensions: ['jpeg', 'jpg', 'png'],
            maxFileSize: 5000,//单位是kb，5M
        }
        // 文件上传框
        var imageurl = $("#file").attr("value");
        if (imageurl) {
            var imgName = imageurl;
            var op = $.extend({
                initialPreview: [ // 预览图片的设置
                    "<img src='<%=path%>" + imageurl + "' class='kv-preview-data file-preview-image' title='" + imgName + "' alt='" + imgName + "' width=100% heigth=100%>",
                ]
            }, options);
            $("#file").fileinput(op);
        } else {
            $("#file").fileinput(options);
        }
    }
</script>
</body>
</html>

